import React, { useEffect } from 'react'
import { Button, Form, Input } from 'antd';
// import PropTypes from 'prop-types';
import Upload from '../Upload'
import './form.scss'
export const Forms = (props) =>{
    let logoImg = ''
    const setLogoImg = (url) => {
        logoImg = url
    }
    const onFinish = (values) => {
        if (logoImg) values['logoImg'] = logoImg
        if (props.onClick) props.onClick(values)
    }
    const onValuesChange = (changedValues, allValues) => {
        console.log('allValues', allValues)
        if (props.getChangedValuesAndAllValues) props.getChangedValuesAndAllValues (changedValues, allValues)
    }
    const onFinishFailed = (err) => {
        console.log(`err`, err)
    }
    const createFormItem = () => {
        const { formList } = props
        if (!formList) return null
        return formList.map((item, index) => {
            let nr = null
            switch(item.type) {
                case 'input':
                    nr = <Input />
                    break;
                case 'upload':
                    nr = <Upload setLogoImg= { setLogoImg } />
            }
            return <Form.Item
                wrapperCol={{ offset: 8, span: 16 }}
                label={ item.label }
                name={ item.name }
                key={ index }
                rules={[
                    {
                        required: item.required,
                    },
                ]}
            >
                { nr }
            </Form.Item>
        })
    }
    const [form] = Form.useForm()
    const getFieldsValue = () => {
        return '66666'
    }
    useEffect(() => {
        form.setFieldsValue(props.formData)
    }, [props])
    const { formList, noBtn } = props
    return (
        <div className={'form-container'}>
            {
                formList ?
                    <Form
                        form={form}
                        name="basic"
                        labelCol={{
                            span: 4,
                        }}
                        wrapperCol={{
                            span: 16,
                        }}
                        initialValues={{
                            remember: true,
                        }}
                        onFinish={ onFinish }
                        onValuesChange={ onValuesChange }
                        onFinishFailed={ onFinishFailed }
                        autoComplete="off"
                    >
                        { createFormItem() }
                        {
                            noBtn ? null :
                                <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                                    <Button type="primary" htmlType="submit">
                                        Submit
                                        {/*5462818mdLfj*/}
                                    </Button>
                                </Form.Item>
                        }
                    </Form> : null
            }

        </div>
    )
}

